import { View, Text, StyleSheet, Pressable } from 'react-native';
import { router } from 'expo-router';
import { Image } from 'expo-image';

export default function HotNewsList() {
  const news = [
    {
      id: 1,
      title: '科技创新引领未来：AI技术突破性进展',
      image: 'https://picsum.photos/200/200?random=1',
      summary: '最新研究显示，人工智能技术在医疗诊断领域取得重大突破...',
    },
    {
      id: 2,
      title: '全球气候变化：各国积极应对环境挑战',
      image: 'https://picsum.photos/200/200?random=2',
      summary: '联合国气候大会召开，各国代表共同商讨环保措施...',
    },
    {
      id: 3,
      title: '体育盛事：世界杯精彩回顾',
      image: 'https://picsum.photos/200/200?random=3',
      summary: '本届世界杯创造多项新纪录，精彩比赛让观众印象深刻...',
    },
    {
      id: 4,
      title: '文化艺术：博物馆夜游活动引关注',
      image: 'https://picsum.photos/200/200?random=4',
      summary: '全国多地博物馆推出夜间参观活动，深受年轻人欢迎...',
    },
    {
      id: 5,
      title: '教育改革：新政策促进教育公平',
      image: 'https://picsum.photos/200/200?random=5',
      summary: '教育部发布新政策，着力解决教育资源分配不均问题...',
    },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.sectionTitle}>热门新闻</Text>
      {news.map((item) => (
        <Pressable
          key={item.id}
          style={styles.newsItem}
          onPress={() =>
            router.push({
              pathname: '/news/[id]',
              params: {
                id: item.id,
                title: item.title,
              },
            })
          }
        >
          <Image source={item.image} style={styles.newsImage} />
          <View style={styles.newsContent}>
            <Text style={styles.newsTitle}>{item.title}</Text>
            <Text style={styles.newsSummary}>{item.summary}</Text>
          </View>
        </Pressable>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    padding: 15,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  newsItem: {
    flexDirection: 'row',
    marginBottom: 15,
  },
  newsImage: {
    width: 100,
    height: 100,
    borderRadius: 8,
  },
  newsContent: {
    flex: 1,
    marginLeft: 10,
  },
  newsTitle: {
    fontSize: 16,
    fontWeight: '500',
  },
  newsSummary: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});
